<template>
  <div class="content_home">
    <div class="home_left">
      <div class="avatar">
        <div class="avatar_top">
          <div class="line">
            <el-avatar shape="square" :size="100" :src="url"></el-avatar>
            <div class="avatar_right">
              <div class="ava_top">admin</div>
              <div class="ava_bot">超级管理员</div>
            </div>
          </div>
        </div>
        <div class="p p_text">
          <span>上次登录时间:</span>
          <span>2020-10-28</span>
        </div>
        <div class="p">
          <span>上次登录地点:</span>
          <span>东莞</span>
        </div>
      </div>
      <div class="line_hands">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>语言详情</span>
          </div>
          <div>Javascript</div>
          <el-progress
            color="yellow"
            :percentage="80"
            :format="format"
          ></el-progress>
          <div>Node</div>
          <el-progress
            color="blue"
            :percentage="30"
            :format="format"
          ></el-progress>
          <div>Css</div>
          <el-progress :percentage="60" :format="format"></el-progress>
          <div>Webpack</div>
          <el-progress
            color="red"
            :percentage="90"
            :format="format"
          ></el-progress>
        </el-card>
      </div>
      <div class="line_hands">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span style="color: skyblue; font-weight: bold">发展方向</span>
          </div>
          <div
            style="
              padding: 10px 0;
              width: 100%;
              text-align: center;
              display: flex;
            "
          >
            小程序占比
            <el-input
              v-model="percentage"
              placeholder="修改增量"
              @input="OK()"
            ></el-input>
          </div>
          <el-progress
            type="dashboard"
            :percentage="percentage"
            :stroke-width="10"
            :color="colors"
          ></el-progress>
        </el-card>
      </div>
    </div>
    <div class="home_right">
      <div class="ico_number">
        <div class="num" v-for="item in nums" :key="item.num">
          <div class="num_s" :style="{ background: item.color }">
            <i :class="item.icon" style="font-size: 50px"></i>
          </div>
          <div class="num_ss">
            <div class="numColor" :style="{ color: item.bg }">
              {{ item.num }}
            </div>
            <div>{{ item.text }}</div>
          </div>
        </div>
      </div>
      <!-- 待办事项 -->
      <div class="add_work">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>卡片名称</span>
            <el-button style="float: right; padding: 3px 0" type="text"
              >添加</el-button
            >
          </div>
          <div style="height:310px">
                 <el-table :show-header=false  size="mini" :data="show_list" style="width: 100%">
              <el-table-column width="50">
                <template slot-scope="scope">
                  <el-checkbox v-model="scope.row.status"></el-checkbox>
                </template>
              </el-table-column>
              <el-table-column>
                  <template slot-scope="scope">
                      {{scope.row.title}}
                  </template>
              </el-table-column>
              <el-table-column width="160"> 
                  <el-button size='mini' type="danger">删除</el-button>
                  <el-button size='mini' type="primary">编辑</el-button>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      url:
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      colors: [
        { color: "#f56c6c", percentage: 20 },
        { color: "#e6a23c", percentage: 40 },
        { color: "#5cb87a", percentage: 60 },
        { color: "#1989fa", percentage: 80 },
        { color: "#6f7ad3", percentage: 100 },
      ],
      percentage: 10,
      nums: [
        {
          icon: "el-icon-s-check",
          num: "21",
          text: "用户访问量",
          color: "green",
          bg: "green",
        },
        {
          icon: "el-icon-bell",
          num: "267",
          text: "系统消息",
          color: "blue",
          bg: "blue",
        },
        {
          icon: "el-icon-video-camera-solid",
          num: "1018",
          text: "数量",
          color: "pink",
          bg: "pink",
        },
      ],
      show_list: [
        { status: false, title: "今日完成了3个bug" },
        { status: false, title: "今日完成了3个bug" },
        { status: false, title: "今日完成了3个bug" },
        { status: false, title: "今日完成了3个bug" },
        { status: false, title: "今日完成了3个bug" },
        { status: false, title: "今日完成了3个bug" },
      ],
    };
  },
  methods: {
    format(percentage) {
      if (percentage == "80") {
        return "较多";
      } else if (percentage == "90") {
        return "也不少";
      } else if (percentage == "30") {
        return "不多哦";
      } else {
        return `${percentage}%`;
      }
    },
    OK() {
      this.percentage = Math.min(this.percentage, 100);
    },
  },
};
</script>

<style>
.content_home {
  display: flex;
  width: 100%;
  padding: 10px;
  background: #ebeef5;
  box-sizing: border-box;
}
</style>
<style scoped>
.avatar {
  height: 255px;
  width: 315px;
  background: #fff;
  border-radius: 5px;
}
.avatar:hover {
  box-shadow: 0 5px 10px #ddd;
}
.home_left {
  width: 315px;
}
.avatar_top {
  height: 142px;
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
}
.line {
  display: flex;
  border-bottom: 2px solid #999;
  width: 100%;
  margin-bottom: -15px;
}
.avatar_right {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.ava_top {
  height: 50%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  font-size: 30px;
  font-weight: 900;
}
.ava_bot {
  height: 50%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  color: #999;
}
.p_text {
  margin-top: 30px;
}
.p {
  width: 100%;
  box-sizing: border-box;
  padding: 5px 15px;
  display: flex;
}
.p > span {
  display: flex;
  width: 50%;
  color: #999;
  font-size: 15px;
}
/* 此处为第二模块的交界线 */

.line_hands {
  height: 255px;
  width: 315px;
  background: #fff;
  margin-top: 20px;
  border-radius: 5px;
  display: flex;
}
.line_hands:hover {
  box-shadow: 0 5px 10px #ddd;
}
.box-card {
  width: 100%;
  height: 100%;
}
/* right 交界 */
.home_right {
  width: 685px;
  padding: 0 10px;
  box-sizing: border-box;
}
.ico_number {
  display: flex;
  justify-content: space-between;
}
.num {
  display: flex;
}
.num_s {
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  /* background: cornflowerblue; */
  color: #fff;
  font-size: 18px;
  border-radius: 5px;
}
.num_ss {
  width: 100px;
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #fff;
  color: #999;
  font-size: 13px;
  border-radius: 5px;
}
.numColor {
  font-size: 30px;
  font-weight: bold;
}
.num:nth-child(2) {
  margin-left: 20px;
}
.num:nth-child(3) {
  margin-left: 20px;
}
/* 待办事项 */
.el-radio__label {
  margin-left: 50px;
}
.add_work{
    margin-top: 20px;
}
</style>